<template>

  <el-card>
    <div class="page-header">
      <!-- 1.当前组件左右两处不确定，用插槽占位
           2.左右内容不一定都需要显示，只有使用组件时，给插槽分发了内容才展示
           3.所以用：$slots和v-if配合做条件渲染
           ！！知识点：$slots可以获取到组件所有的插槽内容
             -->
      <div class="left">
        <!-- 如果传递了left插槽就展示 -->
        <div v-if="$slots.left" class="content">
          <el-icon name="info" />
          <slot name="left" />
        </div>
      </div>
      <div class="right">
        <!-- 如果传递了right插槽就展示  -->
        <div v-if="$slots.right" class="content">
          <slot name="right" />
        </div>
      </div>
    </div>
  </el-card>

</template>

<script>

export default {
  name: 'PageHeader'

}
</script>

<style scoped lang="scss">
.page-header{
  display: flex;
  justify-content: space-between;
  .left{
    .content{
      display:flex;
      align-items: center;
      height: 100%;
      padding: 0 15px;
      border:1px solid #91d5ff;
      border-radius: 5px;
      background: #e6f7ff;
      .el-icon-info{
        margin-right: 5px;
        color: #409eff;
      }
    }
  }

}

</style>
